<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>水费</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/app.css" />
		<link href="../../../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../../../css/mui.poppicker.css" rel="stylesheet" />	
		<style>
			body{overflow-y: auto; background-color: #f4f4f4;}		
		   .mui-content{background-color: #f4f4f4;}	
		   .mui-table-view:before,.mui-table-view-cell:after,.mui-table-view:after{background:none;}
	       .mui-table-view-cell{padding: .2rem .3rem; box-sizing: border-box; color: #999; font-size: .3rem}
	       .mui-table-view-cell>.select_box{color: #72befd; position: relative;max-width:70%;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;}
	       .mui-table-view-cell>.select_box:after{}
	       .select_box_arrow{content: ''; width: 0px; height: 0px; border-left: 5px solid transparent; border-right:5px solid transparent; border-top: 5px solid #999999;float:left;margin:.14rem 0 0 .05rem;}
	       .user_list{background-color: #f4f4f4; color: #333;}
	       .code_pic{display: block; width: .57rem; height: .53rem; background:url(../../../images/service/s_ico08.png) no-repeat center; background-size: cover; float: right;}
	       .disount_txt{padding: .35rem; line-height: 1.5;}
		   button[type=button]{margin: .6rem .25rem; color: #fff; width:7rem; padding: .25rem 0px; background-color: #ff7800; font-size: .32rem; border: none;}
		   .ico_code{background: url(../../../images/service/s_ico05.png) no-repeat; display: inline-block; vertical-align: middle; width: .43rem; height: .43rem; background-size: cover; margin: 0px .1rem 0px 0px;}
			.fl{float: left;}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{height:.4rem;line-height:.4rem;width:88%;font-size:.3rem;}
		</style>
	</head>

	<body>
		<!-- 主体start -->
		<div class="mui-content">
			<div class="bill">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell" style="text-overflow:ellipsis;">
				    	<span class="fl">收费单位：</span>
				    	<span  id='showUserPicker' class="select_box fl"></span>
				    	<span class="select_box_arrow"></span>
				    </li>
				    <li class="mui-table-view-cell user_list">缴费户号：</li>
				    <li class="mui-table-view-cell disount_txt">
				    <div class="mui-input-row">
				        <label style="width: 10%;"><span id="sacn" class="code_pic mui-right mui-hidden"></span></label>
				        <input id="account" type="text" placeholder="请输入缴费户号">
				    </div>
				    </li>
				</ul>
				<button id="check" type="button" class="mui-btn mui-btn-block ripple"><i class="ico_code"></i>查询账单</button>
			</div>
		</div>		
		<script type="text/javascript" src="../../../js/immersed.js" ></script>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/common.js" ></script>
		<script type="text/javascript" src="../../../js/app.js" ></script>
		<script src="../../../js/mui.picker.min.js"></script>
		<script src="../../../js/mui.poppicker.js"></script>
		<script type="text/javascript">
			mui.init();var itemId = "";var city = SYS_PARAM.BM_CITY;
			var projectJson = {
				c2670:'水费',
				c2680:'电费',
				c2681:"燃气费"
			}
			//TODO
		/*var projectNO = {
				c2670:'1708387',
				c2680:'5172625756',
				c2681:"0122842014"
			}
			*/
			
			mui.plusReady(function(){
				//类型
				var projectId = utils.getUrlParam('projectId');
				//获取历史户号
				//TODO 测试户号
				account.value = localStorage.getItem(projectId) ? localStorage.getItem(projectId) :"";//projectNO[projectId]
				var url = 'appHttpService/qianmi/getCityItemList.do';
				//获取基础数据
				utils.ajax(url,function(data){
					data = JSON.parse(data);
					if(data.state == 1){
						localStorage.setItem("HFWaterItems",data.list);
						var list = JSON.parse(data.list);
						if(list.items && list.items.length > 0){
							var sbuStr =projectJson[projectId]+"直充任意充"
							var showUserPickerButton = document.getElementById('showUserPicker');
							var items = list.items;
							//showUserPickerButton.innerText = items[0].itemName.substring(0,items[0].itemName.length - projectSbuStrNum[projectId]);
							showUserPickerButton.innerText  = items[0].itemName.replace(projectJson[projectId],"").replace("户号","").replace("任意充","").replace("直充","");
							itemId = items[0].itemId;
							//赋值给选择器
							var dateArrary = [];
							for (var i = 0 ; i<items.length ; i++ ) {
								dateArrary.push({
									value:items[i].itemId,
									text:items[i].itemName.replace(projectJson[projectId],"").replace("户号","").replace("任意充","").replace("直充","")
								})
							} 
							var userPicker = new mui.PopPicker();
							userPicker.setData(dateArrary);
							showUserPickerButton.addEventListener('tap', function(event) {
								userPicker.show(function(items) {
									itemId = items[0].value;
									showUserPickerButton.innerText = items[0].text;
								});
							}, false);
						}
					}else{
						 mui.toast('获取收费单位失败');
						 showUserPickerButton.innerText = "当前无法选择数据";
					}
				},"provinc=&city="+city+"&projectId="+projectId,{showWait:true});
				document.getElementById("check").addEventListener('tap',function(){
					if(!itemId){
						mui.toast('请选择收费单位')
						return
					}
					if(!account.value){
						mui.toast('请填写户号');
						return
					}
					//保存历史记录
					localStorage.setItem(projectId,account.value) ;
					var url = "_www/src/bianmin/life_pay/waterGasElectricity_step2.html?"+jsonToParams({
						itemId:itemId,
						account:account.value,
						projectId:projectId
					});
					showTemplates("waterGasElectricity_step2","缴费",url);
				})
			})
		</script>
	</body>

</html>